<template>
  <div style="background-color: #f5f6f7; width: 958px">
    <div class="baseDiv">
      <el-form :model="addOwnerForm" :rules="rules" ref="addOwnerForm"  class="addForm">
        <el-form-item label="入库仓库" prop="storageName" >
          <el-select  class="selectclass" v-model="addOwnerForm.storageName"  @change="getStorageOtherInfo"  clearable filterable placeholder="请选择仓库">
            <el-option
              v-for="item in this.storageList"
              :key="item.id"
              :label="item.storageName"
              :value="item.storageName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="el-form-item-right" label="联系人姓名"  prop="storageContact">
            <el-input v-model="addOwnerForm.storageContact" maxlength="50" placeholder="请输入联系人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人电话"  prop="storageContactPhone">
            <el-input v-model="addOwnerForm.storageContactPhone" maxlength="15" placeholder="请输入联系人电话" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-form-item-right" label="司机姓名"  prop="">
            <el-input v-model="addOwnerForm.driverName" placeholder="请输入司机姓名" maxlength="50" clearable></el-input>
        </el-form-item>
        <el-form-item label="司机电话" prop="driverPhone">
            <el-input v-model="addOwnerForm.driverPhone" placeholder="请输入司机电话" maxlength="15" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-form-item-right" label="入库日期"  prop="instoreDate">
          <el-date-picker v-model="addOwnerForm.instoreDate"  type="date" clearable format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请输入入库日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="柜号" prop="">
            <el-input v-model="addOwnerForm.cntrNo" placeholder="请输入柜号" maxlength="20" @blur="validatecntrNo" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')" clearable></el-input>
        </el-form-item>
        <div label=""  prop="" style="width: 958px;">
            <el-table border :data="goodList" style="margin-top: 30px;margin-bottom:10px;" >
              <el-table-column prop="goodsName" label="货物名称" align="center" >
                <div slot-scope="scope">
                  <el-input v-model="scope.row.goodsName" maxlength="50"  style="width: 200px"  ></el-input>
                </div>
              </el-table-column>
              <el-table-column prop="fildna" label="计划入库数量" align="center">
                <div slot-scope="scope">
                  <el-input  v-model="scope.row.planCount" style="width: 200px" maxlength="8" @keyup.native="verifyInteger(scope.row, 'planCount')" ></el-input>
                </div>
              </el-table-column>

              <el-table-column prop="fildna" label="计划入库重量(kg)" align="center" >
                <div slot-scope="scope">
                  <el-input  v-model="scope.row.planWeight" style="width: 200px"  maxlength="10" @keyup.native="verifyDecimal(scope.row, 'planWeight')"></el-input>
                </div>
              </el-table-column>

              <el-table-column fixed="right"  label="操作" align="center">
                <div slot-scope="scope">
                  <el-button v-if="scope.$index == 0" @click.native.prevent="addRow(scope.$index,goodList)" type="text" class="icon maliiconfont maliicon-img_details_add icon_right" size="small">  </el-button>
                  <el-button v-else @click.native.prevent="deleteRow(scope.$index, goodList)" type="text"  class="icon maliiconfont maliicon-img_details_subtract icon_right" size="small">  </el-button>
                </div>
              </el-table-column>
            </el-table>
        </div>
      </el-form>
      <file-upload :roleType="this.$props.roleType" :fileUrlsArray="this.responseData" :headTitle="'提交入库指令资料'" :headSonTitle="'支持pdf,jpg,png,gif,bmp,xls,xlsx,csv,doc,docx(最多五张)'" @getFileUrls="getFileUrls" >
      </file-upload>
      <input-com :headTitle="'备注'" :inputValue="this.addOwnerForm.ownerRemark" @getInputVal="getInputVal" :headSonTitle="'填写备注'"></input-com>
      <el-row class="btnFrameClass">
        <el-button class="singleBtnClass" v-permission="['wms:instore:submmit']" @click="submitForm('addOwnerForm')" type="primary">提交</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
  import maValidate from 'utils/common-method/validate/index';
  import inputCom from 'components/input/baseTitleInput.vue';
  import fileUpload from 'components/fileUpload/file.vue';
  import {validateTips} from 'utils/tips';
  import searchSelect from 'components/search-select/searchSelect';
  export default {
    components: {
      inputCom,
      fileUpload,
      searchSelect
    },
    props: {
      roleType: {
        type: Number
      }
    },
    data() {
      return {
        goodList: [{goodsName: '', planCount: '', planWeight: ''}],
        storageList: [],
        addOwnerForm: {
          storageName: '',
          storageContact: '',
          storageContactPhone: '',
          driverName: '',
          driverPhone: '',
          instoreDate: '',
          cntrNo: '',
          ownerRemark: ''
        },
        responseData: {
          batchFiles: [
          ],  // 生产批次单数组
          businessType: 1,
          operateType: null,
          clerkName: '',
          cntrNo: '',
          customerRemark: '',
          declarationFiles: [], // 报关单数组
          driverName: '',
          driverPhone: '',
          storageContact: '',
          storageContactPhone: '',
          findOrderNo: '',
          id: null,
          inspectionFiles: [],  // 商检单数组
          instoreDate: '',
          instoreDetails: [
            {
              actCount: null,
              actWeight: null,
              checkImg: [],
              countryOrigin: '',
              goodsName: '',
              id: null,
              markImg: [],
              packageId: null,
              planCount: null,
              planWeight: null,
              productDate: '',
              unit: '',
              vendor: ''
            }
          ],
          instoreFiles: [], // 入库单数组
          instoreOrderNo: '',
          ownerId: null,
          ownerRemark: '',
          resource: '',
          scanFiles: [], // 抄码单数组
          status: '',
          storageId: null
        },
        searchparams: [
          {
            title: '入库仓库',
            key: 'storageName',
            style: 'float: left; width: 15rem; color: #8492a6; font-size: 13px'
          },
          {
            title: '联系人姓名',
            key: 'storageContactName',
            style: 'float: left; width: 30rem; color: #8492a6; font-size: 13px'
          },
          {
            title: '联系人电话',
            key: 'storageContactPhone',
            style: 'float: left; width: 30rem; color: #8492a6; font-size: 13px'
          }
        ],
        rules: {
          storageName: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'},
            {min: 0, max: 150, message: validateTips.WORD_LESS_150, trigger: 'blur'}
          ],
          storageContact: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'},
            {min: 0, max: 150, message: validateTips.WORD_LESS_150, trigger: 'blur'}
          ],
          storageContactPhone: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'},
            { validator: maValidate.checkMobileNo, trigger: 'blur' }
          ],
          driverName: [
            {required: false, message: validateTips.FILL_BASE_INFO, trigger: 'blur'},
            {min: 0, max: 150, message: validateTips.WORD_LESS_150, trigger: 'blur'}
          ],
          driverPhone: [
            { validator: maValidate.checkMobileNoFalse, trigger: 'blur' }
          ],
          instoreDate: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'}
          ],
          cntrNo: [
            {required: false, message: validateTips.FILL_BASE_INFO, trigger: 'blur'},
            {min: 0, max: 20, message: validateTips.LESS_20, trigger: 'blur'}
          ]
        }
      };
    },
    created() {
      this.getStorageInfo(); // 获取仓库数据
    },
    methods: {
      validatecntrNo() {
        let reg = /^[A-Za-z0-9]{1,20}$/;
        if (!reg.test(this.addOwnerForm.cntrNo)) {
          this.addOwnerForm.cntrNo = null;
        }
      },
      getStorageInfo() {
        // let valueStr = JSON.stringify(['wms_unit', 'wms_package']);
        this.ajax({
          type: 'POST',
          url: '/maliwms/storage/selectStorage',
          data: {storageName: ''},
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.storageList = res.result;
          }
        });
      },
      // 下拉搜索仓库选择
      getStorageOtherInfo: function(value) {
        for (let j = 0; j < this.storageList.length; j++) {
          if (this.storageList[j].storageName === value) {
            this.addOwnerForm.storageContact = this.storageList[j].applicantContact;
            this.addOwnerForm.storageContactPhone = this.storageList[j].applicantConTel;
            this.responseData.storageId = this.storageList[j].id;
          }
        }
      },
      // 校验整数
      verifyInteger(val, prop) {
        maValidate.verifyInteger(val, prop);
      },
      // 校验小数
      verifyDecimal(val, prop) {
        maValidate.verifyDecimal(val, prop);
      },
      getFileUrls(titleImg, fileNameArr, fileUrlArr) {
        if (titleImg === '报关单') {
          this.responseData.declarationFiles = [];
          for (let i = 0; i < fileUrlArr.length; i++) {
            let singleImg = {name: '', url: ''};
            singleImg.name = fileNameArr[i];
            singleImg.url = fileUrlArr[i];
            this.responseData.declarationFiles.push(singleImg);
          }
        }
        if (titleImg === '商检单') {
          this.responseData.inspectionFiles = [];
          for (let i = 0; i < fileUrlArr.length; i++) {
            let singleImg = {name: '', url: ''};
            singleImg.name = fileNameArr[i];
            singleImg.url = fileUrlArr[i];
            this.responseData.inspectionFiles.push(singleImg);
          }
        }
        if (titleImg === '生产批次单') {
          this.responseData.batchFiles = [];
          for (let i = 0; i < fileUrlArr.length; i++) {
            let singleImg = {name: '', url: ''};
            singleImg.name = fileNameArr[i];
            singleImg.url = fileUrlArr[i];
            this.responseData.batchFiles.push(singleImg);
          }
        }
      },
      getInputVal(val) {
        this.addOwnerForm.ownerRemark = val;
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },

      addRow(index, tableData, event) {
        tableData.push({
          goodsName: '',
          vendor: '',
          countryOrigin: '',
          productDate: '',
          planCount: '',
          actCount: '',
          unit: '',
          planWeight: '',
          actWeight: '',
          packageId: '',
          markImg: [],
          checkImg: []
        });
      },
      removeOtherPara (urlArray) {  // 移除url 数组 多出来的 uid status字段
        if (urlArray.length > 0) {
          for (let i = 0; i < urlArray.length; i++) {
            if (urlArray[i].uid !== '') {
              delete urlArray[i].uid;
            }
            if (urlArray[i].status !== '') {
              delete urlArray[i].status;
            }
          }
        }
      },
      // 提交入库数据函数
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveInstore();
//            alert('submit!');
          } else {
            return false;
          }
        });
      },
      saveInstore() {
        this.responseData.driverName = this.addOwnerForm.driverName;
        this.responseData.driverPhone = this.addOwnerForm.driverPhone;
        this.responseData.storageName = this.addOwnerForm.storageName;
        this.responseData.storageContact = this.addOwnerForm.storageContact;
        this.responseData.storageContactPhone = this.addOwnerForm.storageContactPhone;
        this.responseData.instoreDate = this.addOwnerForm.instoreDate;
        this.responseData.cntrNo = this.addOwnerForm.cntrNo;
        this.responseData.ownerRemark = this.addOwnerForm.ownerRemark;
        this.responseData.instoreDetails = this.goodList;
        this.removeOtherPara(this.responseData.declarationFiles);
        this.removeOtherPara(this.responseData.inspectionFiles);
        this.removeOtherPara(this.responseData.batchFiles);
        this.responseData.resource = null; // 1.找库订单  2.移动端指令 3.入库录单 4.PC端指令
        let onceMessag = 0; // 只弹提示一次
        if ((this.addOwnerForm.storageName === '' || !this.addOwnerForm.storageName) || this.addOwnerForm.contactName === '' || this.addOwnerForm.contactPhone === '' || this.addOwnerForm.instoreDate === '') {
          onceMessag++;
          return false;
        }
        for (let i = 0; i < this.goodList.length; i++) {
          onceMessag = 0;
          if ((this.goodList[i].goodsName === '') || (this.goodList[i].planCount === '') || (this.goodList[i].planWeight === '')) {
            if (onceMessag === 0) {
              this.errorTip('请完善货物信息！');
              onceMessag++;
            }
            return false;
          }
        }
        if (onceMessag === 0) {
          this.ajax({
            type: 'POST',
            url: '/maliwms/instore/saveInstore',
            data: this.responseData,
            loading: true,
            success: (res) => {
              setTimeout(() => {
                this.$pcNProgress.done();
              }, 300);
              if (res.code === 200) {
                this.$emit('closeRefresh');
              } else {
                this.errorTip(res.message);
              }
            }
          });
        }
      }
    }
  };
</script>
<style scoped>
  .baseDiv {
    display: flex;
    flex-wrap: wrap;
    width: 958px;
    height: 350px;
    border: 1px solid #e5e5e5;
    background-color: white
  }

  .baseDiv .el-form-item {
    display: inline-block;
    width: 420px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .baseDiv .el-form-item-right {
    float: right;
  }
  .baseDiv .el-form-item .el-input {
    width: 420px;
  }
  .addForm{
    margin-top:10px;
    /*width:1000px;*/
  }
  .el-form-item .el-form-item__error {
    /*padding-top: 36px;*/
    /*margin-left: -60px;*/
  }
  .btnFrameClass
  {
    margin-left: 430px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .singleBtnClass
  {
    width: 140px;
    height: 40px;
  }
  .selectclass {
    width: 420px;
  }
</style>
